<template>

  <div class="user-list">
      <el-button class="rt_btn" type="primary" icon="el-icon-plus">新增对比</el-button>
      <div class="user-item" v-for="(card,index) in userImage" :key="(card,index)">
        <div class="user-img">
          <div v-for="(image,index) in userImage" :key="(image,index)">
              <img src="../../assets/logo.png" alt="" :title="image.userImg">
          </div>
        </div>
        <div class="animation-btn">
            <i class="el-icon-connection"></i>
            <span>正在对比中</span>
        </div>
        <p>正在努力对比中，请稍后查看</p>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userImage:[
        {userImg:"../../assets/logo.png",userName:"赵大成"},
        {userImg:"../../assets/logo.png",userName:"赵大成"},
        {userImg:"../../assets/logo.png",userName:"赵大成"},
        {userImg:"../../assets/logo.png",userName:"赵大成"},
        {userImg:"../../assets/logo.png",userName:"赵大成"}
      ]
    }
   },
}
</script>

<style  lang="less">
  .user-list{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    padding-top: 40px;
    .rt_btn{
      position: absolute;
      right: 15px;
      top: -3px;
    }
    .user-item{
      width: calc(33.33% - 30px);
      background-color: #f5f5f5;
      border-radius: 10px;
      padding: 35px 30px;
      margin: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .user-img{
        display: flex;
        justify-content: center;
        overflow: hidden;
        padding-left: 15px;
        &>div{
          width: 50px;
          height: 50px;
          background-color: #f5f5f5;
          border-radius: 50%;
          box-sizing: border-box;
          border: 3px solid rgba(0,0,0,0.1);
          overflow: hidden;
          margin-left: -15px;

          img{
            width: 100%;
          }
        }
      }
      .animation-btn{
        width: 136px;
        height: 38px;
        // padding: 15px 15px;
        line-height: 38px;
        margin: 25px 0 15px 0;
        border: 1px solid rgb(11, 117, 255);
        border-radius: 30px;
        color: rgb(11, 117, 255);
        i{
          margin-right: 8px;
        }
      }
    }
  }

</style>